@import '../../../../variables';

:host {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 2px;
  min-width: 20px;
  padding: 0 $s;
  padding-left: 0;
  font-size: 10px;
  border-radius: $s * 2;
  cursor: pointer;

  @include darkTheme() {
    color: $dark-theme-text-color-less-intense;
  }
  @include lightTheme() {
    color: $light-theme-text-color-less-intense;
  }
}

$dot-size: 15px;
$ico-size: 13px;
$line-height: 15px;
$ico-pad: ($dot-size -$ico-size) * 0.5;
$pad: ($ico-size - $line-height + $ico-pad * 2) * 0.5;

.tag-title {
  display: block;
  font-size: 12px;
  line-height: $line-height;
  padding: $pad 0;

  // hide inside add task bar for smaller screens
  :host-context(.mat-autocomplete-panel) & {
    @include mq(xs, max) {
      display: none;
    }
  }
}

.tag-ico {
  display: block;
  padding: $ico-pad;
  font-size: $ico-size;
  height: $dot-size;
  width: $dot-size;
  border-radius: 50%;
  color: $c-contrast;

  // needs to be important to overwrite inside mat option
  margin-right: 3px !important;
}
